<script setup>
import Declaration from "../../components/Declaration.vue";
import NoResult from '../../components/NoResult.vue'
import {useRouter} from 'vue-router'
import {ref, reactive, computed, onMounted} from "vue";
const router = useRouter()
import {useLoad} from './useLoad.js'

const onClickLeft = () => history.back();
const onClickRank = () => {
  router.push('/')
}
const riskTitle = ref("振华科技(000733)")


// 排序
const useSort = () => {
  const map = new Map([
    ['asc', 'asc'],
    ['desc', 'desc'],
  ])
  const asc = map.get('asc');
  const desc = map.get('desc');
  const params = reactive({
    hazard_warning_day: '', // 危险预警日[asc,desc]
    week_biggest_drop: '',// 1周内最大跌幅[asc,desc]
    month_biggest_drop: '',// 1月内最大跌幅[asc,desc]
  });

  const yearSortClass = computed(() => {
    return params.hazard_warning_day === asc
        ? 'arrow-up'
        : params.hazard_warning_day === desc ? "arrow-down" : ""
  })
  const earningsSortClass = computed(() => {
    return params.week_biggest_drop === asc
        ? 'arrow-up'
        : params.week_biggest_drop === desc ? "arrow-down" : ""
  })
  const monthSortClass = computed(() => {
    return params.month_biggest_drop === asc
        ? 'arrow-up'
        : params.month_biggest_drop === desc ? "arrow-down" : ""
  })

  const _resetParams = (currentKey) => {
    for (let key in params) {
      if (currentKey !== key) {
        params[key] = '';
      }
    }
  }
  const sortClick = (key) => {
    _resetParams(key)
    const value = params[key];
    if (value === desc) {
      params[key] = asc
    }
    if (value === asc) {
      params[key] = ''
    }
    if (!value) {
      params[key] = desc
    }
  }

  return {
    params, sortClick, yearSortClass, earningsSortClass, monthSortClass
  }
}

const {params, sortClick, yearSortClass, earningsSortClass, monthSortClass} = useSort()
const {list, loading, finished, refreshing, onLoad, onRefresh} = useLoad()


</script>

<template>
  <div class="app-container">
    <van-sticky>
      <van-nav-bar
          :title="riskTitle"
          left-arrow @click-left="onClickLeft"
      >
        <template #left>
          <img src="@/assets/images/icon_btn_back_black@3x.png" width="16" height="16" alt="">
        </template>
      </van-nav-bar>
    </van-sticky>
    <van-pull-refresh :disabled="true" v-model="refreshing" :head-height="80" @refresh="onRefresh">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <template #finished>
          <NoResult v-if="list.length===0"/>
          <div v-else class="van-list__finished-text">
            没有更多了
          </div>
        </template>
        <!--  交易记录-->
        <div class="record">
          <div class="record__tit" @click="onClickRank">
            <div class="text">历史避险表现</div>
            <van-icon color="#a5a6ae" name="arrow"/>
          </div>
          <div class="header">
            <div class="record__line n-b-border">
              <div class="title flex-start" @click="sortClick('hazard_warning_day')">
                <div class="header-text">危险预警日</div>
                <div class="arrow" :class="yearSortClass"></div>
              </div>
              <div class="count flex-end" @click="sortClick('week_biggest_drop')">
                <div class="header-text">1周内最大跌幅</div>
                <div class="arrow" :class="earningsSortClass"></div>
              </div>
              <div class="amount flex-end" @click="sortClick('month_biggest_drop')">
                <div class="header-text">1月内最大跌幅</div>
                <div class="arrow" :class="monthSortClass"></div>
              </div>
            </div>
          </div>
          <div class="tbody">
            <div class="record__line" v-for="(item,index) in list">
              <div class="title">
                <h1 class="buyin">{{ item?.name }}</h1>
                <div class="sub-text">上升至危险</div>
              </div>
              <div class="count">
                <div class="volume main-text">{{ item?.yearEarning }}%</div>
              </div>
              <div class="amount">
                <div class="sum main-text">{{ item?.overage }}%</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
  <Declaration/>
</template>

<style scoped lang="scss">
.app-container {
  background: #fff;
  min-height: calc(100vh - 220px);

  .flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.record {
  //margin-top: 24px;
  background: #fff;
  padding: 14px 16px 0px 16px;
  width: 100%;
  min-height: 100px;
  //border-radius: 16px;
  background: rgba(255, 255, 255, 1);

  .record__tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //border:1px solid red;
    .text {
      text-align: justify;
      color: rgba(29, 33, 50, 1);
      font-family: PingFangSC-Medium;
      font-weight: 450;
      font-size: 18px;
      line-height: 25px;
    }

    .van-badge__wrapper {
      font-size: 14px;
      position: relative;
      top: 2px;
    }
  }

  .record__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;
    padding: 12px 0 12px 0;

    &:last-child {
      border-bottom: 0;
    }

    > div {
      //border:1px solid red;
    }

    .header-text {
      height: 18px;
      text-align: right;
      color: rgba(165, 166, 173, 1);
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 13px;
      line-height: 18px;
    }

    .main-text {
      height: 21px;
      text-align: center;
      color: rgba(247, 51, 45, 1);
      font-family: DINPro-Medium;
      font-weight: 450;
      font-size: 16px;
      line-height: 21px;
    }

    .sub-text {
      height: 17px;
      mix-blend-mode: normal;
      color: rgba(108, 110, 122, 1);
      font-family: DINPro-Medium;
      font-weight: 450;
      font-size: 12px;
      line-height: 17px;
    }

    .title {
      flex: 1;

      h1 {
        height: 24px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 17px;
        line-height: 24px;
        color: rgb(29, 33, 50);
      }
    }

    .count {
      width: 30%;
      text-align: right;
    }

    .amount {
      width: 30%;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>